<style lang="less">
@import "../../styles/common.less";
@import "./components/table.less";
</style>
<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .search-box{
        /* width:200px; */
        padding-bottom: 10px;
    }
    .page-box{
        padding-top:10px;
    }
    .button-box{
      text-align: right;
    }
    td.ivu-table-expanded-cell{
        padding:20px 10px 20px 40px;
        background: #fff;
    }
</style>
<template>
    <div>
        <Spin fix  v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据拼命加载中...</div>
        </Spin>
        <Row>
            <Col span="24" class="padding-left-10">
                <Card>
                    <div class="search-box">
                      <Row>
                        <Col span="7">
                           <Input v-model="params.searchKeyword" icon="search" @on-enter="handleSearch" placeholder="请输入标题搜索..." />
                       </Col>
                      </Row>
                    </div>
                    <can-edit-table  refs="table1" @on-edit="handleCellChange" @on-delete="handleDel" @input="handleInput" v-model="tableData" :columns-list="columnsList"></can-edit-table>
                    <div class="page-box">
                        <Page :total="total" show-sizer @on-change="pageHandler"></Page>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import canEditTable from "./components/canEditTable.vue";
// import expandRow from './table-expand.vue';
import DmUtils from "dm-dev-utils";
import API from '../../api/api_project';
export default {
  name: "editable-table",
  components: {
    canEditTable,
    // expandRow
  },
  data() {
    // <Tag checkable color="blue">标签一</Tag>
    return {
      expandTitle:false,
      params:{
          searchKeyword:'',
          page: 1, 
          size: 10//每页10条
      },

      total:0,
      spinShow:false,
      columnsList: [
        {
          title: "编号",
          key: "id",
          width: 80
        },
        {
          title: "项目名称",
          key: "title",
          editable: true
        },
        // {
        //   title: "技术选型",
        //   key: "technique"
        // },{
        //   title: "技术亮点",
        //   key: "highlight"
        // },
        {
          title: "项目类型",
          align: "center",
          key: "type",
          render: (h, params) => {
            let texts,color;
            switch (params.row.type) { //实训二 step0：未答辩，1已答辩
              case 1:
                texts = "PC";
                color = "yellow";
                break;
              case 2:
                texts = "WEB_APP"; 
                color = "green";
                break;
              case 3:
                texts = "Hybrid_APP"; 
                color = "green";
                break;
              case 4:
                texts = "小程序"; 
                color = "green";
                break;
            }

            return h('Tag', {  
              props: {
                color: color
              },
            },texts)
          }
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          key: "handle",
          handle: ["edit"]
        }
      ],
      tableData: [],
      showCurrentTableData: false
    };
  },
  methods: {
    // udpateOk
    updateOk(newRow,index){//状态同步起来
      // this.tableData[index] = newRow;
      // this._tableData();
      // console.log(this.tableData,newRow,index);
    },
    //搜索内容
    handleSearch(){
    },

    // 新增考题
    addKaotiHander(){
      // 带查询参数，变成/backend/order?selected=2
      let query = {
        direction:'设计方向',
        state:'专业阶段',
        course: 'UI设计基础',
      }
      this.$router.push({path: '/addKaoti', query: query});
      // this.$router.push({name:'addKaoti', params: query});
    },
    pageHandler(currentNum){
        this.params.page = currentNum;
        // console.log(99999,this,arguments);
        this._tableData();
    },
    getData() {
      // this.columnsList = ;
    },
    _tableData(){
        this.spinShow = true;
        let params = this.params;
        API.findList(params).then((res)=>{
            this.tableData = res.data;
            this.total = res.total;
            this.spinShow = false;
        })
    },
    handleNetConnect(state) {
      this.breakConnect = state;
    },
    handleLowSpeed(state) {
      this.lowNetSpeed = state;
    },
    getCurrentData() {
      this.showCurrentTableData = true;
    },
    handleInput(){
      console.log('监听input得到得东西',arguments, this);
    },
    handleDel(data, val, index) {
      API.remove(data.id).then((res)=>{
          //第二种方案：不刷
          this.$Message.success(res.msg);
          this.tableData.splice(index, 1);
          setTimeout(() => {
            this._tableData();
          }, 500);
      })
      
    },
  
    handleCellChange(data,currentRow) {
      if(data.title == currentRow.title) return;
      let params = {
        title: data.title
      }
      // console.log(1111111111,params);
      // params = DmUtils.objToQuery(params, 1);
      // DmUtils.postData('https://a.daxiangclass.com/kaoti.php/api/v1/update',params,(res)=>{
      //   this.$Message.success(
      //   '修改成功'
      //   );
      // });

      API.update(data.id, params).then((res)=>{
        this.$Message.success(
        '修改成功'
        );
      })
    },
    handleChange(val, index) {
      this.$Message.success("修改了第" + (index + 1) + "行数据");
    }
  },
  created() {
    this._tableData();
  },
  mounted () {
     
  }
};
</script>
